<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<link rel="stylesheet" href="../resources/js/bootstrap-3.3.5-dist/css/bootstrap.css" />
		<script type="text/javascript" src="../resources/js/jquery.min.js"></script>
		<script type="text/javascript" src="../resources/js/vue.js" charset="utf-8"></script>
	</head>

	<body class="container">

		<div id="app" class="text-center text-danger bg-primary">
			{{ message }}
		</div>

		<div id="app2">
			<p>{{ message }}</p>
			<input v-model="message">
		</div>

		<div id="app3">
			<ul>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ul>
		</div>
		<div id="app4">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">Reverse Message</button>
		</div>
		<div id="app5">
			<input v-model="newTodo" v-on:keyup.enter="addTodo">
			<ul>
				<li v-for="todo in todos">
					<span>{{ todo.text }}</span>
					<button v-on:click="removeTodo($index)">X</button>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue.js!'
				}
			})
			new Vue({
				el: '#app2',
				data: {
					message: 'Hello Vue.js!'
				}
			})
			new Vue({
				el: '#app3',
				data: {
					todos: [{
						text: 'Learn JavaScript'
					}, {
						text: 'Learn Vue.js'
					}, {
						text: 'Build Something Awesome'
					}]
				}
			})
			new Vue({
				el: '#app4',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
			new Vue({
				el: '#app5',
				data: {
					newTodo: '',
					todos: [{
						text: 'Add some todos'
					}]
				},
				methods: {
					addTodo: function() {
						var text = this.newTodo.trim()
						if (text) {
							this.todos.push({
								text: text
							})
							this.newTodo = ''
						}
					},
					removeTodo: function(index) {
						this.todos.splice(index, 1)
					}
				}
			})
		</script>
	</body>

</html>
